<template>
	<view>
		<view class="order-item" v-for="(item,i) in orderList" :key="i">
			<van-panel :title="'日期'+item.date" :desc="'订单号'+item.orderid" :status="item.status">
			  <view class="order-goods" v-for="(item,i) in JSON.parse(item.cart)" :key="i" >
				
		
		
					 <view class="img">
					  	<img :src='item.img'>
					  </view>
					  <view class="title">
					  	{{item.name}}
					  </view>
					  <view class="num">
					  		x{{item.count}}
					  </view>
					 
			
			
			<!-- 	  <view class="img">
				  	<img :src='JSON.parse(item.cart).img'>
				  </view>
				  <view class="title">
				  	{{JSON.parse(item.cart).name}}
				  </view>
				  <view class="num">
				  		x{{JSON.parse(item.cart).count}}
				  </view> -->
			
			  </view>
				
			</van-panel>
			
			<view class="amount">
				实付金额:{{item.amount}}元
			</view>
		</view>
		
		
		
	</view>
</template>


<script>

	
	import { mapState} from "vuex"
	export default {
		data() {
			return {
				orderList:{}
				
			}
		},
	
		
		methods: {
			


		
			 getOrder(){
				  uni.request({
					url: this.$apiServer+"api/myOrder",
					data:{ openid:this.userInfo.openId},
					success: (res) => {
						
						
						this.orderList=res.data.message;
						console.log(this.orderList[1].orderid)
					}
				})
			}
		},
	computed: {
			...mapState("me",['userInfo'])
		},
		onLoad(orderList) {
			this.orderList=JSON.parse(orderList.orderList);
			console.log(this.orderList)
			
		},
		created() {
		
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.order-item{
	border-top: solid 10px rgba(143, 143, 143, 0.2);
	border-bottom: solid 10px rgba(143, 143, 143, 0.2);
		}
.order-goods{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	}
	.img{
		img{
			width: 90px;
			margin-left: 20px;
			margin-top: 5px;
			
		}
		
	}
	.num{
		display: flex;
		margin-right: 10px;
	}
	
	.amount{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin: 10px;
		
	}

</style>
